body{
  margin: 0;

}
.main{
  display: grid;
  
  grid-template: repeat(4, 1fr) / repeat(2, 1fr);

  /* 1. 分为几列 一个值代表一列 ，值代表宽度*/
  /* grid-template-columns: 33.33% 33.33% 33.33%;  */

  /* 2. repeat方法 第一个参数代表的次数， 第二个代表的宽度 */
  /* grid-template-columns: repeat(auto-fill, 30%); */

  /* 3.fr关键字  */
  /* grid-template-columns: 150px 1fr 2fr; */

  /* 4.minmax() 表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值*/
  /* grid-template-columns: 1fr 1fr minmax(100px, 10fr); */

  /* 5. auto关键字 由浏览器自己决定长度*/
  /* grid-template-columns: 100px auto 100px; */

  /* 每一行的高度 */
  /* grid-template-rows: 100px  200px  300px; */
    

  /* 6. 网格线名称 grid-template-columns属性和grid-template-rows属性里面，还可以使用方括号，指定每一根网格线的名字，方便以后的引用。*/
  /* grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4]; */
  /* grid-template-rows: [r1] 100px [r2] 100px [r3] 200px [r4]; */

  /* 7.row-gap属性设置行与行的间隔（行间距），column-gap属性设置列与列的间隔（列间距）。*/
  /* row-gap: 20px;
  column-gap: 20px; */

  /* 8. gap属性是column-gap和row-gap的合并简写形式 gap省略了第二个值，浏览器认为第二个值等于第一个值*/
  /* gap: 20px 30px; */

  /* 区域area布局 详情见area.html */
  /* grid-template-areas: 'a b c'
                       'd e f'
                       'g h i'; */
  grid-auto-flow: column dense;
  justify-items: center;
}
.cont{
  /* text-align: center; */
}

.cont1{
  background: blanchedalmond;
}

.cont2{
  background: lawngreen;
}
.cont3{
  background: red;
}

.cont4{
  background: blanchedalmond;
}

.cont5{
  background: lawngreen;
}
.cont6{
  background: red;
}

.cont7{
  background: blanchedalmond;
}

.cont8{
  background: lawngreen;
}
.cont9{
  background: red;
}